<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>报销列表</title>
<% request.setAttribute("menu", 1); %>
<%@ include file="/WEB-INF/page/public/contentmeta.jsp"%>
<link rel="stylesheet" href="<%=basePath%>css/global.css" media="all" />
<link rel="stylesheet" href="<%=basePath%>plugins/font-awesome/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="<%=basePath%>css/system.css" media="all">
<link rel="stylesheet" href="<%=basePath%>css/tab.css" media="all" />

<style type="text/css">
	.layui-form-label i { color:red; padding-right: 3px;}
	
	.addbg{width:380px;background:#2591d0;color:#fff;cursor:default;}
	.first{border:1px solid #c9c9c9;width:300px;border-radius:2px;}
	#append{width:380px;height:auto;background:#ffffff;border:1px solid #c9c9c9;display:none;border-radius:2px;margin-top:10px;position:absolute;z-index:99999;}
	#append .item{width:380px;height:30px;line-height:30px;}
	
</style>

</head>
<body>
	<div class="admin-tab admin-user">
		<div class="tab-condition">
			<form class="layui-form clefix" id="zyform"
				action="/user/paidlist" method="post">
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="text" name="keyWord" id="keyWord" autocomplete="off" placeholder="请输入关键字" class="layui-input" value="${pager.params.keyWord }">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="width: 170px;">
						<select name="state" id="state" lay-filter="state" class="typeclass">
							<option value="-1" <c:if test="${pager.params.state == -1}">selected</c:if>>全部 </option>
							<option value="0" <c:if test="${pager.params.state == 0}">selected</c:if>>草稿</option>
							<option value="1" <c:if test="${pager.params.state == 1}">selected</c:if>>待审批</option>
							<option value="2" <c:if test="${pager.params.state == 2}">selected</c:if>>审批中</option>
							<option value="3" <c:if test="${pager.params.state == 3}">selected</c:if>>审批通过</option>
							<option value="4" <c:if test="${pager.params.state == 4}">selected</c:if>>审批驳回</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
	                <div class="layui-input-block" style="width:170px;">
	                    <input type="text" style="width:170px;" name="sttime" id="sttime"  placeholder="起始时间" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})" value="${pager.params.sttime}">
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <div class="layui-input-block" style="width:170px;">
	                    <input type="text" style="width:170px;" name="entime" id="entime"  placeholder="结束时间" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})" value="${pager.params.entime}">
	                </div>
	            </div>
				<div class="layui-form-item">
					<input name="skipToPage" id="skipToPage" type="hidden" value="${pager.pageNo}"> 
					<input type="hidden" id="pageNo" name="pageNo" value="${pager.pageNo}"> 
					<input type="hidden" id="totalPage" name="totalPage" value="${pager.totalPages}">
					<button class="layui-btn TM-btn-search searchbtn" type="button">
						<i class="layui-icon layui-unselect layui-tab-close">&#xe615;</i>搜索
					</button>
				</div> 
			</form>
			<div style="margin: 40px 0  0  0; float: left;">
				<a class="layui-btn layui-btn-radius layui-btn-small  layui-btn-danger"><i class="iconfont icon-money"></i>&nbsp;报销总额： ${totalmoney}元</a>
		   </div>
			<div class="TM-tab-info">
				<a class="layui-btn layui-btn-primary layui-btn-small  sqdbbtn"><i class="layui-icon">&#xe621;</i>报销申请</a> 
				<a class="layui-btn layui-btn-primary layui-btn-small  refreshbtn"><i class="layui-icon">&#x1002;</i>刷新</a>
			</div>
		</div>
		<div class="layui-field-box">
			<table class="site-table table-hover TM-table3">
				<thead>
					<tr>
						<th style="width: 9%;">报销人</th>
						<th style="width: 9%;">报销总金额</th>
						<th style="width: 50%;">报销内容</th>
						<th style="width: 10%;">报销时间</th>
						<th style="width: 10%;">审批状态</th>
						<th style="width: 12%;">操作</th>
					</tr>
				</thead>
				<tbody>
						<c:set var="vEnter" value="\n" scope="request" />
						<%
							request.setAttribute("vEnter", "\n");
						%>
					<c:forEach var="obj" items="${pager.resultList}" varStatus="o1">
						<tr>
							<td>${obj.name}</td>
							<td><fmt:formatNumber value="${obj.money}" pattern="#,#00"/>元</span></td>
							<td>${fn:replace(obj.remark, vEnter, '<br />')}</td>
							<td>${obj.createdate.substring(0,10)}</td>
							<td class="bhsptd" appdata="${obj.approvestate}"  data="${obj.id}" >
								<c:if test="${obj.state == 0}">
									未提交审批
								</c:if>
								<c:if test="${obj.state > 0}">
									<c:if test="${obj.approvestate == 0}">待审批</c:if>
									<c:if test="${obj.approvestate == 1}">审批中</c:if>
									<c:if test="${obj.approvestate == 2}">审批通过</c:if>
									<c:if test="${obj.approvestate == 3}">审批驳回</c:if>
								</c:if>
							</td>
							<td>
								<a class="layui-btn layui-btn-normal layui-btn-mini ckbtn" data="${obj.id}">查看</a>
								<c:if test="${obj.state == 0 || obj.approvestate == 3}">
									<a class="layui-btn layui-btn-normal layui-btn-mini deletebtn" data="${obj.id}">删除</a>
								</c:if>
								<c:if test="${obj.state == 0}">
									<a class="layui-btn layui-btn-normal layui-btn-mini tjspbtn" data="${obj.id}">提交审批</a>
								</c:if>
								
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<div class="admin-table-page">
				<div id="page" class="page"></div>
			</div>
		</div>
	</div>
	
	<!-- 申请报销弹窗 -->
	<div id="TM-layui-hetong" style="display: none;">
		<div class="TM-he-tong admin-entering">
			<form class="layui-form TM-entering-form" action="" id="hetongform"
				novalidate="novalidate">
				<div class="form-left">
					<div class="layui-form-item">
						<label class="layui-form-label"><i>*</i><span>报销人姓名 : </span></label>
						<div class="layui-input-block htqyname">
							<input type="text" name="name" id="name"  value="${sessionScope.user.info.name}"    readonly="readonly"  autocomplete="off" class="layui-input" placeholder="请输入代办人姓名">
						</div>
					</div>
				 
					<div class="layui-form-item">
						<label class="layui-form-label">
							<i>*</i><span>报销金额 :</span> 
						</label>
						<div class="layui-input-block">
							<input type="text" name="money" id="money" autocomplete="off" class="layui-input" placeholder="请输入打款金额">
						</div>
					</div>
				</div>
				<div class="layui-form-item TM-hetong-jilu">
					<label class="layui-form-label">备注 : </label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" name="remark" class="layui-textarea "  id="bxremark"></textarea>
					</div>
				</div>
				<div class="entering" id="sxzs" style="width: 95%">
					<h4>
						报销明细&nbsp;&nbsp;
						<button
							class="layui-btn layui-btn-primary layui-btn-small addlxr zhengshu"
							type="button">+添加明细</button>
					</h4>
					<table class="site-table table-hover TM-table3"
						style="border: 1px solid #FFFFFF">
						<thead>
							<tr>
								<th style="width: 10%;">明细内容</th>
								<th style="width: 10%;">金额</th>
								<th style="width: 15%;">操作</th>
							</tr>
						</thead>
						<tbody class="tb_customerzs">
									<tr >
										<td><input type="text" class="layui-input" name="yt" value=""> </td>
										<td><input type="text" class="layui-input" name="je" value=""></td>
										<td>
											 
										</td>
									</tr>	
						</tbody>
					</table>
				</div>
				<input type="hidden" id="sqstate" name="state">
			</form>
		</div>
	</div>
	
	 
     <textarea id="remarktemp"  style="display:none"></textarea>
 
	<script id="zslb" type="text/html"> 
		<tr >
			<td><input type="text" class="layui-input" name="yt" value=""> </td>
			<td><input type="text" class="layui-input" name="je" value=""></td>
			<td>
					<button class="layui-btn layui-btn-primary layui-btn-small deletezs"   type="button">  <i class="layui-icon">&#xe640;</i>删除  </button>
			</td>
		</tr>	
	</script>
	
	

	<script>
		layui.config({
			base : 'plugins/layui/modules/'
		});
		layui.use([ 'element', 'laypage',"laytpl", 'form', 'laydate', 'layer' ],function() {
			var $ = layui.jquery, 
				laypage = layui.laypage, 
				layer = layui.layer,
				laytpl = layui.laytpl,
				element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
			var form = layui.form();
			//用于标记是否正在提交合同
			var tjstate =0;
			
			//更新渲染  
		    form.render();
			
			//点击搜索
			$(".searchbtn").on("click",function(){
				var kd =  $.trim($("#keyWord").val());
				$("#keyWord").val(kd);
				$("#skipToPage").val(1);
				$("#zyform").submit();
			});
			
			//点击查看
			$(".ckbtn").on("click",function(){
				var id = $(this).attr("data");
				var url= "/user/paidinfo?id="+id;
				//打开弹窗
				parent.layer.open({
	                title:'报销详情',
	                type:2,
	                content:url,
	                shadeClose:true,
	                btnAlign:'c',
	                area:['70%','90%']
	            });
			})
			
			//点击提交审批
			$(".tjspbtn").on("click",function(){
				var id = $(this).attr("data");
				$.ajax({
					type : "post",
					url : "/user/approvepaid",
					data : {id : id},
					dataType : "json",
					async : false,
					success : function(data){
						if (data == 1) {
							layer.msg("提交审批成功.",{time:500,icon:1},function(){
								window.location.reload();
							});
						} else {
							layer.msg("提交审批失败.",{time:500,icon:2},function(){
								window.location.reload();
							});
						}				
					}
				});
			});
			
			//点击删除
			$(".deletebtn").on("click",function(){
				var id = $(this).attr("data");
				layer.confirm('确定删除该报销内容吗？', {
					btn: ['确定删除','取消'] //按钮
					}, function(){
						$.ajax({
							type:"post",
							url : "/user/deletepaid",
							data : {id : id},
							dataType : "json",
							async : false,
							success : function(data){
								if (data == 1) {
									layer.msg("删除成功.",{time:500,icon:1},function(){
										window.location.reload();
									});
								} else {
									layer.msg("删除失败.",{time:500,icon:2},function(){
										window.location.reload();
									});
								}	
							}
						});
					}, function(){
				});
			});
			
			//移上去显示驳回理由
			$(document).on("mouseover",".bhsptd",function(){
				layer.closeAll();
				var appstate = $(this).attr("appdata");
				var id = $(this).attr("data");
				var ele = $(this);
				//只有在审批驳回的情况下才会显示
				if (appstate == 3) {
					//查询驳回理由的ajax
					$.ajax({
						type : "post",
						data : {id : id},
						url : "/user/paidoverrulereason",
						dataType : "json",
						async : false,
						success : function(data){
							layer.tips(data, ele, {
		    					tips: [1,'#f7625e'],
		    					area:["400px"],
		    					time:5000,
		    	     		 tipsMore: true
		    	     		});
						}
					});
				}
			});
			 
				
			//申请代办的表单
			$("#hetongform").validate({
				rules: {
					name : {
						required:true
					}, 
					money : {
						required:true,
						digits:true
					}
					 
				},
				messages: {
					name : {
						required:"请输入报销人姓名"
					},
					money : {
						required:"请输入报销金额",
						digits:"请填写正常金额"
					},
					address: {
						required:"请输入代办地点"
					},
					bank: {
						required:"请输入开户行"
					},
					phone: {
						required:"请输入联系电话"
					},
				},
				errorPlacement: function(error, element) {
	 	    		 tjstate =0;
	 				layer.tips(error.text(), element, {
	 					tips: [2,tipColor],
	 	     		 tipsMore: true
	 	     		});
	 	   		},
				submitHandler: function(formobj){
					if(validatezstj()){
						tjstate =1; 
						var bxremark = $("#bxremark").val();
						var  item= $("#remarktemp").val();
						$("#bxremark").val(item+bxremark);
						var values = $("#hetongform").serialize();
					
						$.ajax({
							type : "post",
	         		 		url : "/user/savepaid",
	         		 		data : values,
	         		 		dataType : "json",
	         		 		async : false,
	         		 		success : function(data){
	         		 			window.location.reload();
	         		 		}
						});
					}
				}
			});
			
			$(document).on("mouseout",".tb_customerzs tr",function(){
			   validatezstj();  
			})
			
		 
			
			//验证证书相关条件
			var validatezstj = function(){
				var result =true;
				var trs = $(".tb_customerzs tr");
				if(trs.length<1){
					layer.tips("请输入报销明细", $("#sxzs"), {
						tips: [1,tipColor],
						tipsMore: true
					});
					return false;
				}else{
				    var total =0;
				    var remarktemp ="";
					for(var i=0;i<trs.length;i++){
						   var mx = $(trs[i]).find("input[name='yt']");
						   var je =$(trs[i]).find("input[name='je']");
						   if(mx.val().length<1){
							   layer.tips("请填写明细", mx, {
									tips: [1,tipColor],
									tipsMore: true
								});
							   result = false;
						   }
						 
						   var reg = /^[0-9]*$/;
			            	if (je.val().length<1||!reg.test(je.val())) {
			        			layer.tips("请填写报销金额", je, {
			     					tips: [1,tipColor],
			         	     		tipsMore: true
			         	     	});
			        			   result = false;
			           		}else{
			           			total=total+parseInt(je.val());		
			           		}
			            	
			            	if(result){
			            		remarktemp  +=mx.val()+"（明细金额："+je.val()+"元）\n";
			            	}
					}
					$("#remarktemp").val(remarktemp);
					$("#money").val(total);
				}
				return result;
			}
			
			//点击申请代办
			$(".sqdbbtn").on("click", function() {
				
				layer.open({
					title:'报销申请',
					type:1, 
					content:$('#TM-layui-hetong'),
					btn: ['提交审批','保存', '取消'],
					shadeClose:true,
					scrollbar:true,
					btnAlign:'c',
					area: ['99%','99%'],
					yes: function(){
						//这里是直接提交并审批
						if(tjstate ==0){
							$("#sqstate").val(1);
							if(validatezstj()){
								$("#hetongform").submit();
							} 
						}else{
							layer.msg("正在提交申请,请勿重复提交",{icon: 0});
						}
					},
					btn2 : function(){
						//这里是保存成草稿
						if(tjstate ==0){
							$("#sqstate").val(0);
							if(validatezstj()){
								$("#hetongform").submit();
							} 
						}else{
							layer.msg("正在提交申请,请勿重复提交",{icon: 0});
						}
						return false;
					}
				});
			});
			
			//为了后面关闭这个弹窗
			var zspop = "";
			//点击添加建造师
			$(".zhengshu").on("click",function(){
				
				if(validatezstj()){
					var getTpl = $("#zslb").html();
	    		    laytpl(getTpl).render({}, function(html){
						$(".tb_customerzs").append(html);
					});
				} 
    		    
				/* zspop = layer.open({
	           		title:'添加证书',
	           	 	type:1,
	           	 	id:"tjzs",
					shadeClose: true,
					content:$('#TM-layui-zhengshu'),
					btnAlign:'c',
					area:['90%','95%']
				});  */
			});
	 
			 
			
			//证书添加
			$(document).on('click','.addzs',function(){
				var result = eval('(' + $(this).attr("data") + ')') ,
				getTpl = $("#zs").html();
				if($(".tb_zs  tr[data="+result.id+"]").length>0){
				layer.msg('请勿重复添加' ,{icon: 0});
					return false;
				}
				laytpl(getTpl).render(result, function(html){
				$(".tb_zs").append(html);
				layer.close(zspop);
					//view.innerHTML = html;
				});
			});
			
			//证书删除
			$(document).on('click','.deletezs',function(){
				var current = $(this);
				layer.confirm('确定要删除该明细吗？', {
					btn: ['确定','取消'] //按钮
				}, function(){
					current.parent().parent().remove(); 
					layer.msg("删除成功",{icon:1 });
					 validatezstj();  
				}, function(){}); 
			});
			
			//清除证书搜索条件
			$(document).on('click','.zscleanbtn',function(){
				$("#zskeyword").val("");
				$("#sestate").val(-1);
				//更新渲染  
			    form.render();
			});
			

			var pageNo = $("#pageNo").val();
			var totalPage = $("#totalPage").val();
			//page
			laypage({
				cont : 'page',
				curr : pageNo//'${pager.pageNo}'
				,
				pages : totalPage//'${pager.totalPages}' //总页数
				,
				groups : 5 //连续显示分页数
				,
				jump : function(obj, first) {
					//得到了当前页，用于向服务端请求对应数据
					var curr = obj.curr;
					if (!first) {
						$("#skipToPage").val(curr);
						$("#zyform").submit();
					}
				}
			});
			
	 
			
			//银行联动
			$("#bank").on("keyup",function(){
				var key = $(this).val();
				var html = "";
				if (key != null && key != "") {
					$.ajax({
						type : "post",
						data : {key : key},
						url : "/customer/selectbankname",
						dataType : "json",
						 scriptCharset: 'utf-8',
						success : function(data){
							if (data.length > 0) {
						        $.each(data,function(i, item) {
						        	 html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + item.bankname + "</div>"
						        });
							} else {
								html = "";
							}
							if(html != ""){
		    	      	        $("#append").show().html(html);
		    	      	    }else{
		    	      	        $("#append").hide().html("");
		    	      	    }
						}
					});
				} else {
					return;
				}
				
			});
		
		});
		
		function getFocus(obj){
	  	    $(".item").removeClass("addbg");
	  	    $(obj).addClass("addbg");
	  	}
	  	function getCon(obj){
	  	    var value = $(obj).text();
	  	    $("#bank").val(value);
	  	    $("#append").hide().html("");
	  	}
	</script>
</body>
</html>